<template>
  <page-header-wrapper :title="false">
    <a-card
      title="发票详情"
      :loading="loading"
    >
      <template slot="extra">
<!--        <a-button icon="eye" size="small" type="primary" style="margin-right:5px">查看发票</a-button>-->
        <a-button v-if="expressData.voice_electronic_file != ''" icon="eye" size="small" type="primary" @click="download(expressData.voice_electronic_file)">查看发票</a-button>
        <a-button v-else icon="eye" size="small" type="primary">查看发票</a-button>
      </template>
      <a-divider orientation="left"><b>发票信息</b></a-divider>
      <a-alert :message="`您的发票申请，开票总额￥ ${invoiceDetail.amount}`" type="info" banner />
      <a-descriptions bordered :column="2" style="margin-top:10px">
        <a-descriptions-item label="发票状态">
          {{invoiceDetail.status}}
        </a-descriptions-item>
        <a-descriptions-item label="发票类型">
          {{invoiceDetail.invoice_type}}
        </a-descriptions-item>
        <a-descriptions-item label="发票抬头">
          {{invoiceDetail.header}}
        </a-descriptions-item>
        <a-descriptions-item label="开票公司">
          {{invoiceDetail.company}}
        </a-descriptions-item>
        <a-descriptions-item label="申请时间">
          {{invoiceDetail.created_at}}
        </a-descriptions-item>
        <a-descriptions-item label="开票时间">
          {{invoiceDetail.invoice_time}}
        </a-descriptions-item>
        <a-descriptions-item label="发票编号">
          {{invoiceDetail.invoice_num}}
        </a-descriptions-item>
        <a-descriptions-item label="申请备注">
          {{invoiceDetail.notes}}
        </a-descriptions-item>
        <a-descriptions-item label="审核信息">
          {{invoiceDetail.remarks}}
        </a-descriptions-item>
      </a-descriptions>
<!--      <a-divider orientation="left"><b>专票信息如下</b></a-divider>-->
<!--      <a-descriptions bordered :column="2" style="margin-top:10px">-->
<!--        <a-descriptions-item label="统一社会信用代码">-->
<!--          {{invoiceDetail.social_code}}-->
<!--        </a-descriptions-item>-->
<!--        <a-descriptions-item label="开户银行名称">-->
<!--          {{invoiceDetail.bank_name}}-->
<!--        </a-descriptions-item>-->
<!--        <a-descriptions-item label="基本开户账号">-->
<!--          {{invoiceDetail.account_num}}-->
<!--        </a-descriptions-item>-->
<!--        <a-descriptions-item label="注册场所地址">-->
<!--          {{invoiceDetail.register_address}}-->
<!--        </a-descriptions-item>-->
<!--        <a-descriptions-item label="注册固定电话">-->
<!--          {{invoiceDetail.register_phone}}-->
<!--        </a-descriptions-item>-->
<!--      </a-descriptions>-->
      <a-divider orientation="left"><b>合同信息</b></a-divider>
      <a-table
        bordered
        :row-key="(record) => record.contract_id"
        :columns="contractColumn"
        :data-source="contractData"
      >
        <template slot="contract_no" slot-scope="text, record">
          <a-button type="link" @click="$router.push({ name: 'ContractDetail', params: { id: record.contract_id } })">{{text}}</a-button>
        </template>
        <template slot="tm_name" slot-scope="text, record">
          {{text}}{{record.pt_name}}
        </template>
        <template slot="phone1" slot-scope="text, record">
          {{text}}<span v-if="record.phone2"> / {{record.phone2}}</span>
        </template>
      </a-table>
      <a-divider orientation="left"><b style="color: #1890ff">物流信息</b></a-divider>
      <a-descriptions bordered layout="vertical" :column="3" style="margin-top:10px">
        <a-descriptions-item label="物流公司">
          {{expressData.express_name}}
        </a-descriptions-item>
        <a-descriptions-item label="物流单号">
          {{expressData.express_num}}
        </a-descriptions-item>
      </a-descriptions>
      <a-divider orientation="left"><b>流转历史</b></a-divider>
      <a-table
        bordered
        :row-key="(record) => record.history_id"
        :columns="historyColumn"
        :data-source="historyData"
      >
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getInvoiceDetail } from '@/api/invoice'
import col from '@/columns/invoice'

export default {
  name: 'InvoiceDetail',
  data () {
    return {
      invoiceDetail: {},
      contractData: [],
      expressData: {},
      historyData: [],
      historyColumn: col.history,
      contractColumn: col.contractColumn,
      loading: false
    }
  },
  activated () {
    this.getDetail()
  },
  methods: {
    getDetail () {
      this.loading = true
      getInvoiceDetail(this.$route.params.id).then(res => {
        this.invoiceDetail = res.result.invoiceData
        this.contractData = res.result.contractData
        this.expressData = res.result.invoiceInfo
        this.historyData = res.result.invoiceCheckHistory
        this.loading = false
      })
    },
    onExpress () {
      this.visible = true
    },
    onCancel () {
      this.visible = false
    },
    download (file) {
      window.open(file)
    }
  }
}
</script>

<style scoped>
  /deep/ .ant-alert-message{
    font-size: 15px;
    font-weight: 700;
    color: rgb(245, 34, 45);
  }
</style>
